<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            height:100px;
        }
        .main{
            display: flex;
        }
        .left{
            width: 260px;
            height:500px;
            background-color: #03A9F4;
        }
        .right{
            width: 100%;
            height:500px;
            background-color: #f6574a;
        }
    </style>
</head>
<body>
<h1>观察者模式练习demo</h1>

<div class="header">我是顶部</div>

<div class="main">
    <div class="left">
        <ul>
            <li>首页</li>
            <li>用户管理</li>
            <li>财产管理</li>
            <li>知识分享</li>
            <li>美女管理</li>
        </ul>
    </div>
    <div class="right">我是content</div>
</div>

<script>
    /*
    * 我们是要实现的功能是 点击左侧侧边栏，右边个header显示对应的标题
    * */
    // 定义被观察者
    class Subject{
        constructor() {
            this.observers = []
        }
        // 增加观察者
        add(observer){
            this.observers.push(observer)
        }
        // 通知
        notify(text){
            this.observers.forEach((item)=>{
                item.update(text)
            })
        }
        // 删除观察者
        remove(observe){
            this.observers = this.observers.filter((item=>{
                return item != observe
            }))
        }
    }

    // 观察者
    class Observer{
        constructor(name) {
            this.data = document.querySelector(name)
        }
        // 有人通知我我就触发
        update(text){
            this.data.innerHTML = text
        }
    }


    // 实例化
    let subject = new Subject()
    // 实例化观察者
    let observe1 = new Observer('.header')
    let observe2 = new Observer('.right')
    subject.add(observe1)
    subject.add(observe2)

    // 侧边栏点击事件
    let aside = document.querySelectorAll('.left li')
    for(let i=0; i<aside.length;i++){
        aside[i].onclick = function(e){
            console.log(this.innerHTML)
            subject.notify(this.innerHTML)
        }
    }
</script>

</body>
</html>
